<template>
	<view>
		<view class="hotel xflex-x ">
			<image class="hotel-img xmr20" :src="info.data.hotel.image" mode=""></image>
			<view class="hotel-box xflex-y-around xai">
				<view class="">
					<view class="hotel-title">
						{{name?name:info.data.hotel.name}}
					</view>
					<view class="xflex-x">
						<image v-for="item in info.data.hotel.star" class="xing" src="/static/image/mine/xing.png" mode=""></image>
					</view>
					<view class="">
						<view class="hotel-point">
							{{info.data.hotel.score}}
						</view>
					</view>
				</view>

				<view class="xflex-x">
					<image class="hotel-icon" src="/static/image/mine/address.png" mode=""></image>
					<view class="hotel-addname">
						{{info.data.distance}}
					</view>
				</view>
			</view>
		</view>

		<view class="info">
			<view class="xflex-x">
				<view class="info-span">

				</view>
				<view class="info-title">
					酒店部分信息
				</view>
			</view>

			<view class="info-tag">
				<view class="info-tags xflex-y-center" v-for="item in info.data.hotel.label">
					{{item}}
				</view>
			</view>

			<u-swiper :list="info.data.hotel.images" height="420rpx" @change="change" @click="click"></u-swiper>
		</view>


		<view class="info">
			<view class="xflex-x">
				<view class="info-span">

				</view>
				<view class="info-title">
					您可能的疑问？
				</view>
			</view>

			<u-parse :content="info.conten"></u-parse>


		</view>


		<view class="xbottom">
			<view class="btn" @click="info.show = true">
				立刻订房
			</view>
		</view>
	</view>



	<u-popup :show="info.show" :round="24" mode="center" @close="close" @open="open">
		<view class="pop xflex-y-between xai">
			
			<image class="gb pa" src="/static/image/mine/pgb.png" @click="info.show = false" mode=""></image>
			<view class="">
				<view class="pop-title">
					确认是否入住该酒店？
				</view>
				
				<view class="pop-content">
					<u-parse :content="info.popcontent"></u-parse>
				
				</view>
			</view>
			
			<view class="xflex-x-between">
				<view class="pop-cancel" @click="info.show = false">
					取消
				</view>
				
				<view class="pop-ensure" @click="play()">
					确认支付
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	
	import {
		onReachBottom,
		onShow,
		onLoad,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import {hotelinfo,indexcontent,hotelpays} from "/network/home.js"
	
	let info = reactive({
		id:'',
		data:'',
		conten:'',
		popcontent:'',
		show:false
	})
	let name = ref('')
	// 查看酒店详情
	onLoad((option) =>{
		console.log(option);
		name.value = option.name
		info.id = option.id
		gethotelinfo()
	})
	
	function gethotelinfo(){
		hotelinfo({id:info.id}).then(res=>{
			console.log(res);
			info.data = res.data
		})
	}
	
	indexcontent({
		name:'order_house_doubt'
	}).then(res=>{
		info.conten=res.data
	})
	indexcontent({
		name:'open_blind_pop'
	}).then(res=>{
		info.popcontent=res.data
	})
	
	const play = () =>{
		hotelpays({id:info.id}).then(res=>{
			uni.redirectTo({
				url:'/pages/mine/order/myOrder?type=2'
			})
		})
	}
	
	
</script>

<style lang="scss">
	.hotel {

		padding: 20rpx;
		box-sizing: border-box;
		background-color: #fff;

		&-img {
			width: 200rpx;
			height: 200rpx;
			background-color: #999;
			border-radius: 12rpx;
		}

		&-box {
			height: 200rpx;
		}

		&-title {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
			margin-bottom: 12rpx;
		}

		&-point {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 18rpx;
			color: #999999;
			line-height: 31rpx;

			width: 100rpx;
			height: 32rpx;
			background: #EEEEEE;
			border-radius: 6rpx;

			line-height: 32rpx;
			text-align: center;
			margin-top: 16rpx;
		}

		&-icon {
			width: 28rpx;
			height: 28rpx;

		}

		&-addname {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 20rpx;
			color: #999999;
			line-height: 36rpx;
		}

		&-address {}
	}

	.info {
		padding: 32rpx 30rpx;
		box-sizing: border-box;

		&-span {
			width: 6rpx;
			height: 32rpx;
			background: linear-gradient(90deg, #0DBFFB, #198EFF);
			margin-right: 5rpx;
		}

		&-title {
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #111111;
		}

		&-tag {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			margin: 46rpx auto;
			gap: 54rpx 41rpx;
		}

		&-tags {

			font-family: PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #666666;
			line-height: 40rpx;

			border-right: 1rpx solid #CCCCCC;

			&:last-child {
				border: none;
			}

		}
	}

	.btn {
		// width: 630rpx;
		// height: 88rpx;
		background: linear-gradient(90deg, #0DBFFB, #198EFF);
		border-radius: 44rpx;

		font-family: PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		text-align: center;
	}

	.pop {
		width: 600rpx;
		// height: 590rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		padding: 40rpx 30rpx 0rpx;
		box-sizing: border-box;
		
		.gb {
			width: 40rpx;
			height: 40rpx;
			right: 20rpx;
			top: 20rpx;
		}
		
		&-title {
			text-align: center;
			
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: #111111;
		}
		
		&-content {
			
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #666666;
			line-height: 40rpx;
			height: 400rpx;
			margin-top: 33rpx;
			
		}
		
		&-cancel {
			width: 210rpx;
			height: 88rpx;
			border-radius: 44rpx;
			border: 2px solid #999999;
			
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #333333;
			line-height: 88rpx;
			text-align: center;
		}
		
		&-ensure {
			width: 300rpx;
			height: 88rpx;
			background: linear-gradient(90deg, #0DBFFB, #198EFF);
			border-radius: 44rpx;
			
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
		}
	}
	
	.xing {
		width: 25rpx;
		height: 25rpx;
		margin-right: 10rpx;
	}
</style>